<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Shiseido WechatWork Admin后台管理系统</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="./static/css/font.css">
		<link rel="stylesheet" href="./static/css/weadmin.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="publicjs/jquery-1.8.0.min.js" charset="utf-8"></script>
		<script src="publicjs/smallkingutil.js" charset="utf-8"></script>
	</head>

	<body class="login-bg">

		<div class="login">
			<div class="message">欧珀莱企业微信后台管理</div>
			<div id="darkbannerwrap"></div>

			<form method="post" class="layui-form">
				<input name="account" placeholder="账号" type="text" lay-verify="required" class="layui-input">
				<hr class="hr15">
				<input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
				<hr class="hr15">
				<div class="checkCode">
					<input type="text" id="input1" />
					<canvas width="100" height="50" id="c1"></canvas>
				</div>
				<hr class="hr15">
				<p class="tips">验证码将在<text class='refreshTime'>60</text>s后刷新</p>
				<hr class="hr15">
				<button class="layui-btn loginin" lay-filter="login" lay-submit style="width: 100%;">登录</button>
				<hr class="hr20">

			</form>
		</div>

		<script type="text/javascript">
			layui.extend({
				admin: '{/}./static/js/admin'
			});
			
			layui.use(['form', 'admin'], function() {
				var form = layui.form,
					admin = layui.admin;
				// 监听点击登录按钮事件
				form.on('submit(login)', function(data) {
					var inputCode = $('#input1').val().toUpperCase();
					if(inputCode.length <= 0) {
						layer.msg("请输入验证码！");
						return false;
					} else if(inputCode != word) {
						layer.msg("验证码输入错误！");
						drawCode();
						$('#input1').val("");
						return false;
					} else {
						data = data.field;
						// 发送ajax请求登录
						var ajaxParam = {
							url: commonUtil.domain() + '/admin/login/in',
							data: data
						}
						ajaxUtil.post(ajaxParam, function(data) {
							if(data.code == 200) {
								// 将用户数据存本地sessionStorage 以user_info为键 有效期为关闭浏览器之前
								// commonUtil.addsessionStorage("user_info", JSON.stringify(data.data), -1);
								localStorage.setItem("user_info", JSON.stringify(data.data));
								location.href = './index.html';
							} else {
								layer.msg(data.msg);
							}
						});
						return false;
					}
				});
			});
		</script>
		<script>
			var word = '';

			function rn(min, max) {
				return parseInt(Math.random() * (max - min) + min);
			}

			function rc(min, max) {
				var r = rn(min, max);
				var g = rn(min, max);
				var b = rn(min, max);
				return `rgb(${r},${g},${b})`;
			}

			function drawCode() {
				$('.refreshTime').text('60');
				var w = 100;
				var h = 50;
				var ctx = c1.getContext("2d");
				ctx.fillStyle = rc(180, 230);
				ctx.fillRect(0, 0, w, h);
				var pool = "ABCDEFGHIJKLIMNOPQRSTUVWSYZ1234567890";
				word = '';
				for(var i = 0; i < 4; i++) {
					var c = pool[rn(0, pool.length)]; //随机的字
					word += c;
					var fs = rn(18, 40); //字体的大小
					var deg = rn(-30, 30); //字体的旋转角度
					ctx.font = fs + 'px Simhei';
					ctx.textBaseline = "top";
					ctx.fillStyle = rc(80, 150);
					ctx.save();
					ctx.translate(25 * i + 15, 25);
					ctx.rotate(deg * Math.PI / 180);
					ctx.fillText(c, -15 + 5, -15);
					ctx.restore();
				}
				//5.随机产生5条干扰线,干扰线的颜色要浅一点
				for(var i = 0; i < 5; i++) {
					ctx.beginPath();
					ctx.moveTo(rn(0, w), rn(0, h));
					ctx.lineTo(rn(0, w), rn(0, h));
					ctx.strokeStyle = rc(180, 230);
					ctx.closePath();
					ctx.stroke();
				}
				//6.随机产生40个干扰的小点
				for(var i = 0; i < 40; i++) {
					ctx.beginPath();
					ctx.arc(rn(0, w), rn(0, h), 1, 0, 2 * Math.PI);
					ctx.closePath();
					ctx.fillStyle = rc(150, 200);
					ctx.fill();
				}
				return word
			}

			function settime() {
				var countdown = $('.refreshTime').text();
				if(countdown == 0) {
					$('.refreshTime').text('60');
					drawCode();
					setTimeout(function() {
						settime()
					}, 1000)
				} else {
					countdown--;
					$('.refreshTime').text(countdown);
					setTimeout(function() {
						settime()
					}, 1000)
				}
			}
			$(function() {
				commonUtil.setMaxLength(40);
				drawCode();
				settime();
				$('#c1').click(function() {
					drawCode();
				});
			})
		</script>
		<!-- 底部结束 -->
	</body>

</html>